<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信JSSDK示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .btn {
            display: inline-block;
            background-color: #07C160;
            color: white;
            padding: 10px 15px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn:hover {
            background-color: #06AD56;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>微信JSSDK功能演示</h1>
        
        <div>
            <button class="btn" id="btnScanQRCode">扫描二维码</button>
            <button class="btn" id="btnChooseImage">选择图片</button>
            <button class="btn" id="btnGetLocation">获取位置</button>
            <button class="btn" id="btnShareAppMessage">分享给朋友</button>
        </div>
        
        <div class="result" id="result">
            <p>操作结果将显示在这里...</p>
        </div>
    </div>

    <!-- 引入微信JS SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        // 显示结果的函数
        function showResult(title, data) {
            const resultDiv = document.getElementById('result');
            let content = `<h3>${title}</h3>`;
            
            if (typeof data === 'object') {
                content += '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            } else {
                content += `<p>${data}</p>`;
            }
            
            resultDiv.innerHTML = content;
        }

        // 初始化微信JSSDK
        function initWxConfig() {
            // 获取当前页面URL
            const currentUrl = window.location.href.split('#')[0];
            
            // 请求后端接口获取JSSDK配置
            fetch(`/api/wechat/getJsConfig?url=${encodeURIComponent(currentUrl)}`)
                .then(response => response.json())
                .then(res => {
                    if (res.code === 1) {
                        const config = res.data;
                        
                        // 配置微信JSSDK
                        wx.config({
                            debug: false,
                            appId: config.appId,
                            timestamp: config.timestamp,
                            nonceStr: config.nonceStr,
                            signature: config.signature,
                            jsApiList: [
                                'scanQRCode',
                                'chooseImage',
                                'getLocation',
                                'updateAppMessageShareData',
                                'updateTimelineShareData'
                            ]
                        });
                        
                        wx.ready(function() {
                            showResult('初始化成功', '微信JSSDK初始化成功，可以使用各项功能了');
                            
                            // 配置分享信息
                            wx.updateAppMessageShareData({ 
                                title: '微信JSSDK示例', 
                                desc: '这是一个微信JSSDK功能演示页面', 
                                link: window.location.href, 
                                imgUrl: 'https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png'
                            });
                            
                            wx.updateTimelineShareData({ 
                                title: '微信JSSDK示例', 
                                link: window.location.href, 
                                imgUrl: 'https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png'
                            });
                        });
                        
                        wx.error(function(res) {
                            showResult('初始化失败', res);
                        });
                    } else {
                        showResult('初始化失败', res.msg || '获取配置失败');
                    }
                })
                .catch(error => {
                    showResult('初始化失败', error.message || '网络请求失败');
                });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化微信JSSDK
            initWxConfig();
            
            // 扫描二维码
            document.getElementById('btnScanQRCode').addEventListener('click', function() {
                wx.scanQRCode({
                    needResult: 1,
                    scanType: ["qrCode", "barCode"],
                    success: function(res) {
                        showResult('扫码结果', res.resultStr);
                    },
                    fail: function(res) {
                        showResult('扫码失败', res);
                    }
                });
            });
            
            // 选择图片
            document.getElementById('btnChooseImage').addEventListener('click', function() {
                wx.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: function(res) {
                        showResult('选择图片成功', {
                            localIds: res.localIds,
                            count: res.localIds.length
                        });
                    },
                    fail: function(res) {
                        showResult('选择图片失败', res);
                    }
                });
            });
            
            // 获取位置
            document.getElementById('btnGetLocation').addEventListener('click', function() {
                wx.getLocation({
                    type: 'gcj02',
                    success: function(res) {
                        showResult('获取位置成功', {
                            latitude: res.latitude,
                            longitude: res.longitude,
                            speed: res.speed,
                            accuracy: res.accuracy
                        });
                    },
                    fail: function(res) {
                        showResult('获取位置失败', res);
                    }
                });
            });
            
            // 分享给朋友
            document.getElementById('btnShareAppMessage').addEventListener('click', function() {
                showResult('分享提示', '请点击右上角菜单进行分享操作');
            });
        });
    </script>
</body>
</html>